<script>
	import Modal from "../components/Modal.vue"
	export default {
		components: {
			Modal
		},
		data() {
			return {
				modalShow: false,
				loading:true,
				payType: 0,
				info: {phone:'',title:''},
				imgstr: '',
			}
		},
		onLoad(options) {
			
			var info = uni.getStorageSync('member')
			this.info = info
		},
		
		methods: {
			uploadImages(path) {
				var that = this
				var member = uni.getStorageSync('member')
				
				uni.uploadFile({
					url: getApp().globalData.host + '/srapi/home/uploadImages',
					filePath: path,
					name: 'file',
					success: res => {
						var json = getApp().globalData.host+'/'+res.data;
						that.imgstr = json
						if (that.info && that.info.image) that.info.image = that.imgstr
						uni.request({
							url: getApp().globalData.host + '/srapi/home/updateImgOrNick',
							method: "post",
							header: { // 设置请求的header
								'content-type': 'application/json' // 默认值
							},
							data: {
								image: that.imgstr,id:member.id
							},
							success: (res) => {
								uni.showToast({
									title: '编辑成功',
									icon: "none"
								})
								that.member_action()
							}
						})
					}
				})
			},
			avatarChange() {
				var that = this;
				// 选择图片逻辑
				uni.chooseImage({
					count: 1, // 默认9，设置需要选择的图片张数
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 返回选定照片的本地文件路径列表，数组格式
						that.uploadImages(res.tempFilePaths[0]);
						// 可以在这里调用上传图片的函数，例如this.uploadAvatar(res.tempFilePaths[0])
					}
				});

			},
			
			nicknameSubmit() {
				var that=this;
				var member = uni.getStorageSync('member')
				
				if (!this.info.title) {
					uni.showToast({
						icon: "none",
						title: "请输入昵称"
					})
					return
				}
				
				uni.request({
					url: getApp().globalData.host + '/srapi/home/updateTitle',
					method: "post",
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					data: {
						title: that.info.title,id:member.id
					},
					success: (res) => {
						uni.showToast({
							title: '编辑成功',
							icon: "none"
						})
						that.modalShow=false
						that.member_action()
					}
				})
			},
			member_action(){
				 var that = this
				 var member = uni.getStorageSync('member')
				 
				 uni.request({
					url:getApp().globalData.host+'srapi/home/member',
					method:'POST',
					data: { // 请求的参数
						phone:member.phone
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						if(res.data.data){
							that.member = res.data.data
							uni.setStorageSync('member',that.member)
							var info = uni.getStorageSync('member')
							this.info = info
						}
					}
				 })
			},
		}
	}
</script>
<template>
	<view class="custom-bg">

		<Modal v-if="modalShow" :confirmText="'确认修改'" :showCancel="true" @confirm="nicknameSubmit" @cancel="()=>{
			modalShow=false
		}">
			<input type="text" placeholder="请输入昵称" maxlength="6" class="bg-gray-300 h-70 my-30 rounded-50" v-model="info.title"
				style="text-align: center;">
		</Modal>
		
		
		<div class="list mt-30 ">
			<div class="flex between p-30 bg-white mb-20">
				<image v-if="info.image" :src="info.image" mode="aspectFill" class="w-140 h-140 rounded-full" style="width: 140rpx;height: 140rpx;"></image>
				<image v-else src="../../static/my/avatar.png" mode="aspectFill" class="w-140 h-140 rounded-full" style="width: 140rpx;height: 140rpx;"></image>
				<div class="fz24 text-gray-a4" @click="avatarChange">更新头像
				</div>
			</div>

			<div class="h-90 flex between px-30 bg-white">
				<div class="fz26 text-gray-29">名称：</div>
				<div class="fz24 text-gray-a4 flex" @click="modalShow=true">{{info.title}}
					
				</div>
			</div>
			
			<div class="h-90 flex between px-30 bg-white" v-if="loading==true">
				<div class="fz26 text-gray-29">手机号 <text style="font-size: 22rpx;color: #999;">(不能修改)：</text></div>
				<div class="fz24 text-gray-a4 flex" >{{info.phone||''}}</div>
			</div>
			
		</div>


	</view>


</template>



<style>
	/*每个页面公共css */
	/* #ifndef MP */
	div {
		box-sizing: border-box;
	}

	/* #endif */
	.line {
		height: 2rpx;
		width: 100%;
		background-color: #F0F0F0;
	}

	.avatar {
		background: linear-gradient(to bottom, #CC62F4, #9D6BF6);
		border-radius: 50%;
		padding: 4rpx;
	}

	.custom-bg {
		background-image: url("/static/common/bg.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
	}


	.custom-input {
		border: 4rpx solid #AC5FF8;
		height: 97rpx;
		width: 100%;
		display: flex;
		align-items: center;
		border-radius: 22rpx;
		padding: 0 30rpx;
		background-color: #fff;
	}
	.custom-input input{
		font-size: 25rpx;
	}
	.relative {
		position: relative;
	}

	.absolute {
		position: absolute;
	}

	.l-0 {
		left: 0
	}

	.t-0 {
		top: 0
	}

	.r-0 {
		right: 0
	}

	.b-0 {
		bottom: 0
	}

	.z-10 {
		z-index: 10;
	}

	.bg-white {
		background-color: #fff;
	}

	view {
		box-sizing: border-box;
	}

	/*每个页面公共css */
	.text-center {
		text-align: center;
	}

	.overflow-hidden {
		overflow: hidden;
	}

	.w-full {
		width: 100%;
	}

	.h-full {
		height: 100%;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.flex-1 {
		flex: 1;
	}



	.flex-row {
		display: flex;
		flex-direction: row;
	}



	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-shirnk-0 {
		flex-shrink: 0;
	}


	.items-start {
		align-items: flex-start;
	}

	.ellipsis {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.text-red {
		color: #FC4343;
	}

	.text-red-2 {
		color: #FA5151;
	}

	.text-black {
		color: #000;
	}

	.text-white {
		color: #fff;
	}

	.rounded-full {
		border-radius: 50%;
	}

	.shadow {
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
	}

	.text-gray-29 {
		color: #292929;
	}

	.text-gray-16 {
		color: #161616;
	}

	.text-gray-a7 {
		color: #A7A7A7;
	}

	.text-gray-37 {
		color: #373737;
	}

	.text-gray-a4 {
		color: #A4A4A4;
	}

	.font-bold {
		font-weight: bold;
	}

	.text-gray-300 {
		color: #D8D8D8;
	}

	.text-gray-400 {
		color: #D4D4D4;
	}

	.text-gray-500 {
		color: #9E9E9E;
	}

	.text-gray-600 {
		color: #A6A6A6;
	}

	.text-gray-900 {
		color: #9E9E9E;
	}

	.text-green {
		color: #2D9F40;
	}

	.text-green-2 {
		color: #00B578;
	}

	.text-purple {
		color: #AC5FF8;
	}

	.text-cyan {
		color: #07B9B9;
	}

	.text-orange {
		color: #FC7743;
	}

	.text-yellow {
		color: #FFA405;
	}

	.text-blue {
		color: #679CEF;
	}

	.bg-primary {
		background: linear-gradient(to right, #8E53FF, #CF49FF);
	}

	.bg-primary-2 {
		background: linear-gradient(to left, #8E53FF, #CF49FF);
	}

	.bg-pink {
		background-color: #F877B2;
	}

	.bg-pink-2 {
		background-color: #F55C81;
	}

	.bg-purple {
		background-color: #AC5FF8;
	}

	.bg-gray-800 {
		background-color: #F8F8F8;
	}

	.bg-gray-300 {
		background-color: #F3F3F3;
	}

	.bg-gray-400 {
		background-color: #D4D4D4;
	}

	.bg-red {
		background-color: #FF0000;
	}

	.bg-orange {
		background-color: #FF8F1F;
	}

	.bg-green {
		background-color: #00B578;
	}

	.bg-yellow {
		background-color: #FFC300;
	}

	.bg-blue {
		background-color: #3662EC;
	}

	.bg-black-2 {
		background: rgba(0, 0, 0, 0.5);
	}

	.border-gray-9 {
		border: 1px solid #9E9E9E;
	}

	.border-blue {
		border: 1px solid #3662EC;
	}

	.rounded-1 {
		border-radius: 1rpx;
	}

	.rounded-2 {
		border-radius: 2rpx;
	}

	.rounded-3 {
		border-radius: 3rpx;
	}

	.rounded-4 {
		border-radius: 4rpx;
	}

	.rounded-5 {
		border-radius: 5rpx;
	}

	.rounded-6 {
		border-radius: 6rpx;
	}

	.rounded-7 {
		border-radius: 7rpx;
	}

	.rounded-8 {
		border-radius: 8rpx;
	}

	.rounded-9 {
		border-radius: 9rpx;
	}

	.rounded-10 {
		border-radius: 10rpx;
	}

	.rounded-11 {
		border-radius: 11rpx;
	}

	.rounded-12 {
		border-radius: 12rpx;
	}

	.rounded-13 {
		border-radius: 13rpx;
	}

	.rounded-14 {
		border-radius: 14rpx;
	}

	.rounded-15 {
		border-radius: 15rpx;
	}

	.rounded-16 {
		border-radius: 16rpx;
	}

	.rounded-17 {
		border-radius: 17rpx;
	}

	.rounded-18 {
		border-radius: 18rpx;
	}

	.rounded-19 {
		border-radius: 19rpx;
	}

	.rounded-20 {
		border-radius: 20rpx;
	}

	.rounded-21 {
		border-radius: 21rpx;
	}

	.rounded-22 {
		border-radius: 22rpx;
	}

	.rounded-23 {
		border-radius: 23rpx;
	}

	.rounded-24 {
		border-radius: 24rpx;
	}

	.rounded-25 {
		border-radius: 25rpx;
	}

	.rounded-26 {
		border-radius: 26rpx;
	}

	.rounded-27 {
		border-radius: 27rpx;
	}

	.rounded-28 {
		border-radius: 28rpx;
	}

	.rounded-29 {
		border-radius: 29rpx;
	}

	.rounded-30 {
		border-radius: 30rpx;
	}

	.rounded-31 {
		border-radius: 31rpx;
	}

	.rounded-32 {
		border-radius: 32rpx;
	}

	.rounded-33 {
		border-radius: 33rpx;
	}

	.rounded-34 {
		border-radius: 34rpx;
	}

	.rounded-35 {
		border-radius: 35rpx;
	}

	.rounded-36 {
		border-radius: 36rpx;
	}

	.rounded-37 {
		border-radius: 37rpx;
	}

	.rounded-38 {
		border-radius: 38rpx;
	}

	.rounded-39 {
		border-radius: 39rpx;
	}

	.rounded-40 {
		border-radius: 40rpx;
	}

	.rounded-41 {
		border-radius: 41rpx;
	}

	.rounded-42 {
		border-radius: 42rpx;
	}

	.rounded-43 {
		border-radius: 43rpx;
	}

	.rounded-44 {
		border-radius: 44rpx;
	}

	.rounded-45 {
		border-radius: 45rpx;
	}

	.rounded-46 {
		border-radius: 46rpx;
	}

	.rounded-47 {
		border-radius: 47rpx;
	}

	.rounded-48 {
		border-radius: 48rpx;
	}

	.rounded-49 {
		border-radius: 49rpx;
	}

	.rounded-50 {
		border-radius: 50rpx;
	}

	.fz16 {
		font-size: 16rpx;
	}

	.fz20 {
		font-size: 20rpx;
	}

	.fz22 {
		font-size: 22rpx;
	}

	.fz23 {
		font-size: 23rpx;
	}

	.fz24 {
		font-size: 24rpx;
	}

	.fz25 {
		font-size: 25rpx;
	}

	.fz26 {
		font-size: 26rpx;
	}

	.fz27 {
		font-size: 27rpx;
	}

	.fz28 {
		font-size: 28rpx;
	}

	.fz29 {
		font-size: 29rpx;
	}

	.fz30 {
		font-size: 30rpx;
	}

	.fz31 {
		font-size: 31rpx;
	}

	.fz32 {
		font-size: 32rpx;
	}

	.fz33 {
		font-size: 33rpx;
	}

	.fz34 {
		font-size: 34rpx;
	}

	.fz35 {
		font-size: 35rpx;
	}

	.fz36 {
		font-size: 36rpx;
	}

	.fz37 {
		font-size: 37rpx;
	}

	.fz38 {
		font-size: 38rpx;
	}

	.fz39 {
		font-size: 39rpx;
	}

	.fz40 {
		font-size: 40rpx;
	}

	.fz41 {
		font-size: 41rpx;
	}

	.fz42 {
		font-size: 42rpx;
	}

	.fz43 {
		font-size: 43rpx;
	}

	.fz44 {
		font-size: 44rpx;
	}

	.fz45 {
		font-size: 45rpx;
	}

	.fz46 {
		font-size: 46rpx;
	}

	.fz47 {
		font-size: 47rpx;
	}

	.fz48 {
		font-size: 48rpx;
	}

	.fz49 {
		font-size: 49rpx;
	}

	.fz50 {
		font-size: 50rpx;
	}


	.mt-1 {
		margin-top: -1rpx;
	}

	.mt-1 {
		margin-top: 1rpx;
	}

	.mt-2 {
		margin-top: 2rpx;
	}

	.mt-3 {
		margin-top: 3rpx;
	}

	.mt-4 {
		margin-top: 4rpx;
	}

	.mt-5 {
		margin-top: 5rpx;
	}

	.mt-6 {
		margin-top: 6rpx;
	}

	.mt-7 {
		margin-top: 7rpx;
	}

	.mt-8 {
		margin-top: 8rpx;
	}

	.mt-9 {
		margin-top: 9rpx;
	}

	.mt-10 {
		margin-top: 10rpx;
	}

	.mt-11 {
		margin-top: 11rpx;
	}

	.mt-12 {
		margin-top: 12rpx;
	}

	.mt-13 {
		margin-top: 13rpx;
	}

	.mt-14 {
		margin-top: 14rpx;
	}

	.mt-15 {
		margin-top: 15rpx;
	}

	.mt-16 {
		margin-top: 16rpx;
	}

	.mt-17 {
		margin-top: 17rpx;
	}

	.mt-18 {
		margin-top: 18rpx;
	}

	.mt-19 {
		margin-top: 19rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.mt-21 {
		margin-top: 21rpx;
	}

	.mt-22 {
		margin-top: 22rpx;
	}

	.mt-23 {
		margin-top: 23rpx;
	}

	.mt-24 {
		margin-top: 24rpx;
	}

	.mt-25 {
		margin-top: 25rpx;
	}

	.mt-26 {
		margin-top: 26rpx;
	}

	.mt-27 {
		margin-top: 27rpx;
	}

	.mt-28 {
		margin-top: 28rpx;
	}

	.mt-29 {
		margin-top: 29rpx;
	}

	.mt-30 {
		margin-top: 30rpx;
	}

	.mt-31 {
		margin-top: 31rpx;
	}

	.mt-32 {
		margin-top: 32rpx;
	}

	.mt-33 {
		margin-top: 33rpx;
	}

	.mt-34 {
		margin-top: 34rpx;
	}

	.mt-35 {
		margin-top: 35rpx;
	}

	.mt-36 {
		margin-top: 36rpx;
	}

	.mt-37 {
		margin-top: 37rpx;
	}

	.mt-38 {
		margin-top: 38rpx;
	}

	.mt-39 {
		margin-top: 39rpx;
	}

	.mt-40 {
		margin-top: 40rpx;
	}

	.mt-41 {
		margin-top: 41rpx;
	}

	.mt-42 {
		margin-top: 42rpx;
	}

	.mt-43 {
		margin-top: 43rpx;
	}

	.mt-44 {
		margin-top: 44rpx;
	}

	.mt-45 {
		margin-top: 45rpx;
	}

	.mt-46 {
		margin-top: 46rpx;
	}

	.mt-47 {
		margin-top: 47rpx;
	}

	.mt-48 {
		margin-top: 48rpx;
	}

	.mt-49 {
		margin-top: 49rpx;
	}

	.mt-50 {
		margin-top: 50rpx;
	}

	.mr-1 {
		margin-right: 1rpx;
	}

	.mr-2 {
		margin-right: 2rpx;
	}

	.mr-3 {
		margin-right: 3rpx;
	}

	.mr-4 {
		margin-right: 4rpx;
	}

	.mr-5 {
		margin-right: 5rpx;
	}

	.mr-6 {
		margin-right: 6rpx;
	}

	.mr-7 {
		margin-right: 7rpx;
	}

	.mr-8 {
		margin-right: 8rpx;
	}

	.mr-9 {
		margin-right: 9rpx;
	}

	.mr-10 {
		margin-right: 10rpx;
	}

	.mr-11 {
		margin-right: 11rpx;
	}

	.mr-12 {
		margin-right: 12rpx;
	}

	.mr-13 {
		margin-right: 13rpx;
	}

	.mr-14 {
		margin-right: 14rpx;
	}

	.mr-15 {
		margin-right: 15rpx;
	}

	.mr-16 {
		margin-right: 16rpx;
	}

	.mr-17 {
		margin-right: 17rpx;
	}

	.mr-18 {
		margin-right: 18rpx;
	}

	.mr-19 {
		margin-right: 19rpx;
	}

	.mr-20 {
		margin-right: 20rpx;
	}

	.mr-21 {
		margin-right: 21rpx;
	}

	.mr-22 {
		margin-right: 22rpx;
	}

	.mr-23 {
		margin-right: 23rpx;
	}

	.mr-24 {
		margin-right: 24rpx;
	}

	.mr-25 {
		margin-right: 25rpx;
	}

	.mr-26 {
		margin-right: 26rpx;
	}

	.mr-27 {
		margin-right: 27rpx;
	}

	.mr-28 {
		margin-right: 28rpx;
	}

	.mr-29 {
		margin-right: 29rpx;
	}

	.mr-30 {
		margin-right: 30rpx;
	}

	.mr-31 {
		margin-right: 31rpx;
	}

	.mr-32 {
		margin-right: 32rpx;
	}

	.mr-33 {
		margin-right: 33rpx;
	}

	.mr-34 {
		margin-right: 34rpx;
	}

	.mr-35 {
		margin-right: 35rpx;
	}

	.mr-36 {
		margin-right: 36rpx;
	}

	.mr-37 {
		margin-right: 37rpx;
	}

	.mr-38 {
		margin-right: 38rpx;
	}

	.mr-39 {
		margin-right: 39rpx;
	}

	.mr-40 {
		margin-right: 40rpx;
	}

	.mr-41 {
		margin-right: 41rpx;
	}

	.mr-42 {
		margin-right: 42rpx;
	}

	.mr-43 {
		margin-right: 43rpx;
	}

	.mr-44 {
		margin-right: 44rpx;
	}

	.mr-45 {
		margin-right: 45rpx;
	}

	.mr-46 {
		margin-right: 46rpx;
	}

	.mr-47 {
		margin-right: 47rpx;
	}

	.mr-48 {
		margin-right: 48rpx;
	}

	.mr-49 {
		margin-right: 49rpx;
	}

	.mr-50 {
		margin-right: 50rpx;
	}

	.mb-1 {
		margin-bottom: 1rpx;
	}

	.mb-2 {
		margin-bottom: 2rpx;
	}

	.mb-3 {
		margin-bottom: 3rpx;
	}

	.mb-4 {
		margin-bottom: 4rpx;
	}

	.mb-5 {
		margin-bottom: 5rpx;
	}

	.mb-6 {
		margin-bottom: 6rpx;
	}

	.mb-7 {
		margin-bottom: 7rpx;
	}

	.mb-8 {
		margin-bottom: 8rpx;
	}

	.mb-9 {
		margin-bottom: 9rpx;
	}

	.mb-10 {
		margin-bottom: 10rpx;
	}

	.mb-11 {
		margin-bottom: 11rpx;
	}

	.mb-12 {
		margin-bottom: 12rpx;
	}

	.mb-13 {
		margin-bottom: 13rpx;
	}

	.mb-14 {
		margin-bottom: 14rpx;
	}

	.mb-15 {
		margin-bottom: 15rpx;
	}

	.mb-16 {
		margin-bottom: 16rpx;
	}

	.mb-17 {
		margin-bottom: 17rpx;
	}

	.mb-18 {
		margin-bottom: 18rpx;
	}

	.mb-19 {
		margin-bottom: 19rpx;
	}

	.mb-20 {
		margin-bottom: 20rpx;
	}

	.mb-21 {
		margin-bottom: 21rpx;
	}

	.mb-22 {
		margin-bottom: 22rpx;
	}

	.mb-23 {
		margin-bottom: 23rpx;
	}

	.mb-24 {
		margin-bottom: 24rpx;
	}

	.mb-25 {
		margin-bottom: 25rpx;
	}

	.mb-26 {
		margin-bottom: 26rpx;
	}

	.mb-27 {
		margin-bottom: 27rpx;
	}

	.mb-28 {
		margin-bottom: 28rpx;
	}

	.mb-29 {
		margin-bottom: 29rpx;
	}

	.mb-30 {
		margin-bottom: 30rpx;
	}

	.mb-31 {
		margin-bottom: 31rpx;
	}

	.mb-32 {
		margin-bottom: 32rpx;
	}

	.mb-33 {
		margin-bottom: 33rpx;
	}

	.mb-34 {
		margin-bottom: 34rpx;
	}

	.mb-35 {
		margin-bottom: 35rpx;
	}

	.mb-36 {
		margin-bottom: 36rpx;
	}

	.mb-37 {
		margin-bottom: 37rpx;
	}

	.mb-38 {
		margin-bottom: 38rpx;
	}

	.mb-39 {
		margin-bottom: 39rpx;
	}

	.mb-40 {
		margin-bottom: 40rpx;
	}

	.mb-41 {
		margin-bottom: 41rpx;
	}

	.mb-42 {
		margin-bottom: 42rpx;
	}

	.mb-43 {
		margin-bottom: 43rpx;
	}

	.mb-44 {
		margin-bottom: 44rpx;
	}

	.mb-45 {
		margin-bottom: 45rpx;
	}

	.mb-46 {
		margin-bottom: 46rpx;
	}

	.mb-47 {
		margin-bottom: 47rpx;
	}

	.mb-48 {
		margin-bottom: 48rpx;
	}

	.mb-49 {
		margin-bottom: 49rpx;
	}

	.mb-50 {
		margin-bottom: 50rpx;
	}

	.ml-1 {
		margin-left: 1rpx;
	}

	.ml-2 {
		margin-left: 2rpx;
	}

	.ml-3 {
		margin-left: 3rpx;
	}

	.ml-4 {
		margin-left: 4rpx;
	}

	.ml-5 {
		margin-left: 5rpx;
	}

	.ml-6 {
		margin-left: 6rpx;
	}

	.ml-7 {
		margin-left: 7rpx;
	}

	.ml-8 {
		margin-left: 8rpx;
	}

	.ml-9 {
		margin-left: 9rpx;
	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 11rpx;
	}

	.ml-12 {
		margin-left: 12rpx;
	}

	.ml-13 {
		margin-left: 13rpx;
	}

	.ml-14 {
		margin-left: 14rpx;
	}

	.ml-15 {
		margin-left: 15rpx;
	}

	.ml-16 {
		margin-left: 16rpx;
	}

	.ml-17 {
		margin-left: 17rpx;
	}

	.ml-18 {
		margin-left: 18rpx;
	}

	.ml-19 {
		margin-left: 19rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.ml-21 {
		margin-left: 21rpx;
	}

	.ml-22 {
		margin-left: 22rpx;
	}

	.ml-23 {
		margin-left: 23rpx;
	}

	.ml-24 {
		margin-left: 24rpx;
	}

	.ml-25 {
		margin-left: 25rpx;
	}

	.ml-26 {
		margin-left: 26rpx;
	}

	.ml-27 {
		margin-left: 27rpx;
	}

	.ml-28 {
		margin-left: 28rpx;
	}

	.ml-29 {
		margin-left: 29rpx;
	}

	.ml-30 {
		margin-left: 30rpx;
	}

	.ml-31 {
		margin-left: 31rpx;
	}

	.ml-32 {
		margin-left: 32rpx;
	}

	.ml-33 {
		margin-left: 33rpx;
	}

	.ml-34 {
		margin-left: 34rpx;
	}

	.ml-35 {
		margin-left: 35rpx;
	}

	.ml-36 {
		margin-left: 36rpx;
	}

	.ml-37 {
		margin-left: 37rpx;
	}

	.ml-38 {
		margin-left: 38rpx;
	}

	.ml-39 {
		margin-left: 39rpx;
	}

	.ml-40 {
		margin-left: 40rpx;
	}

	.ml-41 {
		margin-left: 41rpx;
	}

	.ml-42 {
		margin-left: 42rpx;
	}

	.ml-43 {
		margin-left: 43rpx;
	}

	.ml-44 {
		margin-left: 44rpx;
	}

	.ml-45 {
		margin-left: 45rpx;
	}

	.ml-46 {
		margin-left: 46rpx;
	}

	.ml-47 {
		margin-left: 47rpx;
	}

	.ml-48 {
		margin-left: 48rpx;
	}

	.ml-49 {
		margin-left: 49rpx;
	}

	.ml-50 {
		margin-left: 50rpx;
	}

	.pt-1 {
		padding-top: 1rpx;
	}

	.pt-2 {
		padding-top: 2rpx;
	}

	.pt-3 {
		padding-top: 3rpx;
	}

	.pt-4 {
		padding-top: 4rpx;
	}

	.pt-5 {
		padding-top: 5rpx;
	}

	.pt-6 {
		padding-top: 6rpx;
	}

	.pt-7 {
		padding-top: 7rpx;
	}

	.pt-8 {
		padding-top: 8rpx;
	}

	.pt-9 {
		padding-top: 9rpx;
	}

	.pt-10 {
		padding-top: 10rpx;
	}

	.pt-11 {
		padding-top: 11rpx;
	}

	.pt-12 {
		padding-top: 12rpx;
	}

	.pt-13 {
		padding-top: 13rpx;
	}

	.pt-14 {
		padding-top: 14rpx;
	}

	.pt-15 {
		padding-top: 15rpx;
	}

	.pt-16 {
		padding-top: 16rpx;
	}

	.pt-17 {
		padding-top: 17rpx;
	}

	.pt-18 {
		padding-top: 18rpx;
	}

	.pt-19 {
		padding-top: 19rpx;
	}

	.pt-20 {
		padding-top: 20rpx;
	}

	.pt-21 {
		padding-top: 21rpx;
	}

	.pt-22 {
		padding-top: 22rpx;
	}

	.pt-23 {
		padding-top: 23rpx;
	}

	.pt-24 {
		padding-top: 24rpx;
	}

	.pt-25 {
		padding-top: 25rpx;
	}

	.pt-26 {
		padding-top: 26rpx;
	}

	.pt-27 {
		padding-top: 27rpx;
	}

	.pt-28 {
		padding-top: 28rpx;
	}

	.pt-29 {
		padding-top: 29rpx;
	}

	.pt-30 {
		padding-top: 30rpx;
	}

	.pt-31 {
		padding-top: 31rpx;
	}

	.pt-32 {
		padding-top: 32rpx;
	}

	.pt-33 {
		padding-top: 33rpx;
	}

	.pt-34 {
		padding-top: 34rpx;
	}

	.pt-35 {
		padding-top: 35rpx;
	}

	.pt-36 {
		padding-top: 36rpx;
	}

	.pt-37 {
		padding-top: 37rpx;
	}

	.pt-38 {
		padding-top: 38rpx;
	}

	.pt-39 {
		padding-top: 39rpx;
	}

	.pt-40 {
		padding-top: 40rpx;
	}

	.pt-41 {
		padding-top: 41rpx;
	}

	.pt-42 {
		padding-top: 42rpx;
	}

	.pt-43 {
		padding-top: 43rpx;
	}

	.pt-44 {
		padding-top: 44rpx;
	}

	.pt-45 {
		padding-top: 45rpx;
	}

	.pt-46 {
		padding-top: 46rpx;
	}

	.pt-47 {
		padding-top: 47rpx;
	}

	.pt-48 {
		padding-top: 48rpx;
	}

	.pt-49 {
		padding-top: 49rpx;
	}

	.pt-50 {
		padding-top: 50rpx;
	}

	.pr-1 {
		padding-right: 1rpx;
	}

	.pr-2 {
		padding-right: 2rpx;
	}

	.pr-3 {
		padding-right: 3rpx;
	}

	.pr-4 {
		padding-right: 4rpx;
	}

	.pr-5 {
		padding-right: 5rpx;
	}

	.pr-6 {
		padding-right: 6rpx;
	}

	.pr-7 {
		padding-right: 7rpx;
	}

	.pr-8 {
		padding-right: 8rpx;
	}

	.pr-9 {
		padding-right: 9rpx;
	}

	.pr-10 {
		padding-right: 10rpx;
	}

	.pr-11 {
		padding-right: 11rpx;
	}

	.pr-12 {
		padding-right: 12rpx;
	}

	.pr-13 {
		padding-right: 13rpx;
	}

	.pr-14 {
		padding-right: 14rpx;
	}

	.pr-15 {
		padding-right: 15rpx;
	}

	.pr-16 {
		padding-right: 16rpx;
	}

	.pr-17 {
		padding-right: 17rpx;
	}

	.pr-18 {
		padding-right: 18rpx;
	}

	.pr-19 {
		padding-right: 19rpx;
	}

	.pr-20 {
		padding-right: 20rpx;
	}

	.pr-21 {
		padding-right: 21rpx;
	}

	.pr-22 {
		padding-right: 22rpx;
	}

	.pr-23 {
		padding-right: 23rpx;
	}

	.pr-24 {
		padding-right: 24rpx;
	}

	.pr-25 {
		padding-right: 25rpx;
	}

	.pr-26 {
		padding-right: 26rpx;
	}

	.pr-27 {
		padding-right: 27rpx;
	}

	.pr-28 {
		padding-right: 28rpx;
	}

	.pr-29 {
		padding-right: 29rpx;
	}

	.pr-30 {
		padding-right: 30rpx;
	}

	.pr-31 {
		padding-right: 31rpx;
	}

	.pr-32 {
		padding-right: 32rpx;
	}

	.pr-33 {
		padding-right: 33rpx;
	}

	.pr-34 {
		padding-right: 34rpx;
	}

	.pr-35 {
		padding-right: 35rpx;
	}

	.pr-36 {
		padding-right: 36rpx;
	}

	.pr-37 {
		padding-right: 37rpx;
	}

	.pr-38 {
		padding-right: 38rpx;
	}

	.pr-39 {
		padding-right: 39rpx;
	}

	.pr-40 {
		padding-right: 40rpx;
	}

	.pr-41 {
		padding-right: 41rpx;
	}

	.pr-42 {
		padding-right: 42rpx;
	}

	.pr-43 {
		padding-right: 43rpx;
	}

	.pr-44 {
		padding-right: 44rpx;
	}

	.pr-45 {
		padding-right: 45rpx;
	}

	.pr-46 {
		padding-right: 46rpx;
	}

	.pr-47 {
		padding-right: 47rpx;
	}

	.pr-48 {
		padding-right: 48rpx;
	}

	.pr-49 {
		padding-right: 49rpx;
	}

	.pr-50 {
		padding-right: 50rpx;
	}

	.pb-1 {
		padding-bottom: 1rpx;
	}

	.pb-2 {
		padding-bottom: 2rpx;
	}

	.pb-3 {
		padding-bottom: 3rpx;
	}

	.pb-4 {
		padding-bottom: 4rpx;
	}

	.pb-5 {
		padding-bottom: 5rpx;
	}

	.pb-6 {
		padding-bottom: 6rpx;
	}

	.pb-7 {
		padding-bottom: 7rpx;
	}

	.pb-8 {
		padding-bottom: 8rpx;
	}

	.pb-9 {
		padding-bottom: 9rpx;
	}

	.pb-10 {
		padding-bottom: 10rpx;
	}

	.pb-11 {
		padding-bottom: 11rpx;
	}

	.pb-12 {
		padding-bottom: 12rpx;
	}

	.pb-13 {
		padding-bottom: 13rpx;
	}

	.pb-14 {
		padding-bottom: 14rpx;
	}

	.pb-15 {
		padding-bottom: 15rpx;
	}

	.pb-16 {
		padding-bottom: 16rpx;
	}

	.pb-17 {
		padding-bottom: 17rpx;
	}

	.pb-18 {
		padding-bottom: 18rpx;
	}

	.pb-19 {
		padding-bottom: 19rpx;
	}

	.pb-20 {
		padding-bottom: 20rpx;
	}

	.pb-21 {
		padding-bottom: 21rpx;
	}

	.pb-22 {
		padding-bottom: 22rpx;
	}

	.pb-23 {
		padding-bottom: 23rpx;
	}

	.pb-24 {
		padding-bottom: 24rpx;
	}

	.pb-25 {
		padding-bottom: 25rpx;
	}

	.pb-26 {
		padding-bottom: 26rpx;
	}

	.pb-27 {
		padding-bottom: 27rpx;
	}

	.pb-28 {
		padding-bottom: 28rpx;
	}

	.pb-29 {
		padding-bottom: 29rpx;
	}

	.pb-30 {
		padding-bottom: 30rpx;
	}

	.pb-31 {
		padding-bottom: 31rpx;
	}

	.pb-32 {
		padding-bottom: 32rpx;
	}

	.pb-33 {
		padding-bottom: 33rpx;
	}

	.pb-34 {
		padding-bottom: 34rpx;
	}

	.pb-35 {
		padding-bottom: 35rpx;
	}

	.pb-36 {
		padding-bottom: 36rpx;
	}

	.pb-37 {
		padding-bottom: 37rpx;
	}

	.pb-38 {
		padding-bottom: 38rpx;
	}

	.pb-39 {
		padding-bottom: 39rpx;
	}

	.pb-40 {
		padding-bottom: 40rpx;
	}

	.pb-41 {
		padding-bottom: 41rpx;
	}

	.pb-42 {
		padding-bottom: 42rpx;
	}

	.pb-43 {
		padding-bottom: 43rpx;
	}

	.pb-44 {
		padding-bottom: 44rpx;
	}

	.pb-45 {
		padding-bottom: 45rpx;
	}

	.pb-46 {
		padding-bottom: 46rpx;
	}

	.pb-47 {
		padding-bottom: 47rpx;
	}

	.pb-48 {
		padding-bottom: 48rpx;
	}

	.pb-49 {
		padding-bottom: 49rpx;
	}

	.pb-50 {
		padding-bottom: 50rpx;
	}

	.pl-1 {
		padding-left: 1rpx;
	}

	.pl-2 {
		padding-left: 2rpx;
	}

	.pl-3 {
		padding-left: 3rpx;
	}

	.pl-4 {
		padding-left: 4rpx;
	}

	.pl-5 {
		padding-left: 5rpx;
	}

	.pl-6 {
		padding-left: 6rpx;
	}

	.pl-7 {
		padding-left: 7rpx;
	}

	.pl-8 {
		padding-left: 8rpx;
	}

	.pl-9 {
		padding-left: 9rpx;
	}

	.pl-10 {
		padding-left: 10rpx;
	}

	.pl-11 {
		padding-left: 11rpx;
	}

	.pl-12 {
		padding-left: 12rpx;
	}

	.pl-13 {
		padding-left: 13rpx;
	}

	.pl-14 {
		padding-left: 14rpx;
	}

	.pl-15 {
		padding-left: 15rpx;
	}

	.pl-16 {
		padding-left: 16rpx;
	}

	.pl-17 {
		padding-left: 17rpx;
	}

	.pl-18 {
		padding-left: 18rpx;
	}

	.pl-19 {
		padding-left: 19rpx;
	}

	.pl-20 {
		padding-left: 20rpx;
	}

	.pl-21 {
		padding-left: 21rpx;
	}

	.pl-22 {
		padding-left: 22rpx;
	}

	.pl-23 {
		padding-left: 23rpx;
	}

	.pl-24 {
		padding-left: 24rpx;
	}

	.pl-25 {
		padding-left: 25rpx;
	}

	.pl-26 {
		padding-left: 26rpx;
	}

	.pl-27 {
		padding-left: 27rpx;
	}

	.pl-28 {
		padding-left: 28rpx;
	}

	.pl-29 {
		padding-left: 29rpx;
	}

	.pl-30 {
		padding-left: 30rpx;
	}

	.pl-31 {
		padding-left: 31rpx;
	}

	.pl-32 {
		padding-left: 32rpx;
	}

	.pl-33 {
		padding-left: 33rpx;
	}

	.pl-34 {
		padding-left: 34rpx;
	}

	.pl-35 {
		padding-left: 35rpx;
	}

	.pl-36 {
		padding-left: 36rpx;
	}

	.pl-37 {
		padding-left: 37rpx;
	}

	.pl-38 {
		padding-left: 38rpx;
	}

	.pl-39 {
		padding-left: 39rpx;
	}

	.pl-40 {
		padding-left: 40rpx;
	}

	.pl-41 {
		padding-left: 41rpx;
	}

	.pl-42 {
		padding-left: 42rpx;
	}

	.pl-43 {
		padding-left: 43rpx;
	}

	.pl-44 {
		padding-left: 44rpx;
	}

	.pl-45 {
		padding-left: 45rpx;
	}

	.pl-46 {
		padding-left: 46rpx;
	}

	.pl-47 {
		padding-left: 47rpx;
	}

	.pl-48 {
		padding-left: 48rpx;
	}

	.pl-49 {
		padding-left: 49rpx;
	}

	.pl-50 {
		padding-left: 50rpx;
	}

	.m-1 {
		margin: 1rpx;
	}

	.m-2 {
		margin: 2rpx;
	}

	.m-3 {
		margin: 3rpx;
	}

	.m-4 {
		margin: 4rpx;
	}

	.m-5 {
		margin: 5rpx;
	}

	.m-6 {
		margin: 6rpx;
	}

	.m-7 {
		margin: 7rpx;
	}

	.m-8 {
		margin: 8rpx;
	}

	.m-9 {
		margin: 9rpx;
	}

	.m-10 {
		margin: 10rpx;
	}

	.m-11 {
		margin: 11rpx;
	}

	.m-12 {
		margin: 12rpx;
	}

	.m-13 {
		margin: 13rpx;
	}

	.m-14 {
		margin: 14rpx;
	}

	.m-15 {
		margin: 15rpx;
	}

	.m-16 {
		margin: 16rpx;
	}

	.m-17 {
		margin: 17rpx;
	}

	.m-18 {
		margin: 18rpx;
	}

	.m-19 {
		margin: 19rpx;
	}

	.m-20 {
		margin: 20rpx;
	}

	.m-21 {
		margin: 21rpx;
	}

	.m-22 {
		margin: 22rpx;
	}

	.m-23 {
		margin: 23rpx;
	}

	.m-24 {
		margin: 24rpx;
	}

	.m-25 {
		margin: 25rpx;
	}

	.m-26 {
		margin: 26rpx;
	}

	.m-27 {
		margin: 27rpx;
	}

	.m-28 {
		margin: 28rpx;
	}

	.m-29 {
		margin: 29rpx;
	}

	.m-30 {
		margin: 30rpx;
	}

	.m-31 {
		margin: 31rpx;
	}

	.m-32 {
		margin: 32rpx;
	}

	.m-33 {
		margin: 33rpx;
	}

	.m-34 {
		margin: 34rpx;
	}

	.m-35 {
		margin: 35rpx;
	}

	.m-36 {
		margin: 36rpx;
	}

	.m-37 {
		margin: 37rpx;
	}

	.m-38 {
		margin: 38rpx;
	}

	.m-39 {
		margin: 39rpx;
	}

	.m-40 {
		margin: 40rpx;
	}

	.m-41 {
		margin: 41rpx;
	}

	.m-42 {
		margin: 42rpx;
	}

	.m-43 {
		margin: 43rpx;
	}

	.m-44 {
		margin: 44rpx;
	}

	.m-45 {
		margin: 45rpx;
	}

	.m-46 {
		margin: 46rpx;
	}

	.m-47 {
		margin: 47rpx;
	}

	.m-48 {
		margin: 48rpx;
	}

	.m-49 {
		margin: 49rpx;
	}

	.m-50 {
		margin: 50rpx;
	}

	.p-1 {
		padding: 1rpx;
	}

	.p-2 {
		padding: 2rpx;
	}

	.p-3 {
		padding: 3rpx;
	}

	.p-4 {
		padding: 4rpx;
	}

	.p-5 {
		padding: 5rpx;
	}

	.p-6 {
		padding: 6rpx;
	}

	.p-7 {
		padding: 7rpx;
	}

	.p-8 {
		padding: 8rpx;
	}

	.p-9 {
		padding: 9rpx;
	}

	.p-10 {
		padding: 10rpx;
	}

	.p-11 {
		padding: 11rpx;
	}

	.p-12 {
		padding: 12rpx;
	}

	.p-13 {
		padding: 13rpx;
	}

	.p-14 {
		padding: 14rpx;
	}

	.p-15 {
		padding: 15rpx;
	}

	.p-16 {
		padding: 16rpx;
	}

	.p-17 {
		padding: 17rpx;
	}

	.p-18 {
		padding: 18rpx;
	}

	.p-19 {
		padding: 19rpx;
	}

	.p-20 {
		padding: 20rpx;
	}

	.p-21 {
		padding: 21rpx;
	}

	.p-22 {
		padding: 22rpx;
	}

	.p-23 {
		padding: 23rpx;
	}

	.p-24 {
		padding: 24rpx;
	}

	.p-25 {
		padding: 25rpx;
	}

	.p-26 {
		padding: 26rpx;
	}

	.p-27 {
		padding: 27rpx;
	}

	.p-28 {
		padding: 28rpx;
	}

	.p-29 {
		padding: 29rpx;
	}

	.p-30 {
		padding: 30rpx;
	}

	.p-31 {
		padding: 31rpx;
	}

	.p-32 {
		padding: 32rpx;
	}

	.p-33 {
		padding: 33rpx;
	}

	.p-34 {
		padding: 34rpx;
	}

	.p-35 {
		padding: 35rpx;
	}

	.p-36 {
		padding: 36rpx;
	}

	.p-37 {
		padding: 37rpx;
	}

	.p-38 {
		padding: 38rpx;
	}

	.p-39 {
		padding: 39rpx;
	}

	.p-40 {
		padding: 40rpx;
	}

	.p-41 {
		padding: 41rpx;
	}

	.p-42 {
		padding: 42rpx;
	}

	.p-43 {
		padding: 43rpx;
	}

	.p-44 {
		padding: 44rpx;
	}

	.p-45 {
		padding: 45rpx;
	}

	.p-46 {
		padding: 46rpx;
	}

	.p-47 {
		padding: 47rpx;
	}

	.p-48 {
		padding: 48rpx;
	}

	.p-49 {
		padding: 49rpx;
	}

	.p-50 {
		padding: 50rpx;
	}

	.w-50p {
		width: 50%;
	}

	.w-0 {
		width: 0rpx;
	}

	.w-5 {
		width: 5rpx;
	}

	.w-10 {
		width: 10rpx;
	}

	.w-15 {
		width: 15rpx;
	}

	.w-20 {
		width: 20rpx;
	}

	.w-25 {
		width: 25rpx;
	}

	.w-30 {
		width: 30rpx;
	}

	.w-35 {
		width: 35rpx;
	}

	.w-40 {
		width: 40rpx;
	}

	.w-45 {
		width: 45rpx;
	}

	.w-50 {
		width: 50rpx;
	}

	.w-55 {
		width: 55rpx;
	}

	.w-60 {
		width: 60rpx;
	}

	.w-65 {
		width: 65rpx;
	}

	.w-70 {
		width: 70rpx;
	}

	.w-75 {
		width: 75rpx;
	}

	.w-80 {
		width: 80rpx;
	}

	.w-85 {
		width: 85rpx;
	}

	.w-90 {
		width: 90rpx;
	}

	.w-95 {
		width: 95rpx;
	}

	.w-100 {
		width: 100rpx;
	}

	.w-105 {
		width: 105rpx;
	}

	.w-110 {
		width: 110rpx;
	}

	.w-115 {
		width: 115rpx;
	}

	.w-120 {
		width: 120rpx;
	}

	.w-125 {
		width: 125rpx;
	}

	.w-130 {
		width: 130rpx;
	}

	.w-135 {
		width: 135rpx;
	}

	.w-140 {
		width: 140rpx;
	}

	.w-145 {
		width: 145rpx;
	}

	.w-150 {
		width: 150rpx;
	}

	.w-155 {
		width: 155rpx;
	}

	.w-160 {
		width: 160rpx;
	}

	.w-165 {
		width: 165rpx;
	}

	.w-170 {
		width: 170rpx;
	}

	.w-175 {
		width: 175rpx;
	}

	.w-180 {
		width: 180rpx;
	}

	.w-185 {
		width: 185rpx;
	}

	.w-190 {
		width: 190rpx;
	}

	.w-195 {
		width: 195rpx;
	}

	.w-200 {
		width: 200rpx;
	}

	.w-205 {
		width: 205rpx;
	}

	.w-210 {
		width: 210rpx;
	}

	.w-215 {
		width: 215rpx;
	}

	.w-220 {
		width: 220rpx;
	}

	.w-225 {
		width: 225rpx;
	}

	.w-230 {
		width: 230rpx;
	}

	.w-235 {
		width: 235rpx;
	}

	.w-240 {
		width: 240rpx;
	}

	.w-245 {
		width: 245rpx;
	}

	.h-0 {
		height: 0rpx;
	}

	.h-5 {
		height: 5rpx;
	}

	.h-10 {
		height: 10rpx;
	}

	.h-15 {
		height: 15rpx;
	}

	.h-20 {
		height: 20rpx;
	}

	.h-25 {
		height: 25rpx;
	}

	.h-30 {
		height: 30rpx;
	}

	.h-35 {
		height: 35rpx;
	}

	.h-40 {
		height: 40rpx;
	}

	.h-45 {
		height: 45rpx;
	}

	.h-50 {
		height: 50rpx;
	}

	.h-55 {
		height: 55rpx;
	}

	.h-60 {
		height: 60rpx;
	}

	.h-65 {
		height: 65rpx;
	}

	.h-70 {
		height: 70rpx;
	}

	.h-75 {
		height: 75rpx;
	}

	.h-80 {
		height: 80rpx;
	}

	.h-85 {
		height: 85rpx;
	}

	.h-90 {
		height: 90rpx;
	}

	.h-95 {
		height: 95rpx;
	}

	.h-100 {
		height: 100rpx;
	}

	.h-105 {
		height: 105rpx;
	}

	.h-110 {
		height: 110rpx;
	}

	.h-115 {
		height: 115rpx;
	}

	.h-120 {
		height: 120rpx;
	}

	.h-125 {
		height: 125rpx;
	}

	.h-130 {
		height: 130rpx;
	}

	.h-135 {
		height: 135rpx;
	}

	.h-140 {
		height: 140rpx;
	}

	.h-145 {
		height: 145rpx;
	}

	.h-150 {
		height: 150rpx;
	}

	.h-155 {
		height: 155rpx;
	}

	.h-160 {
		height: 160rpx;
	}

	.h-165 {
		height: 165rpx;
	}

	.h-170 {
		height: 170rpx;
	}

	.h-175 {
		height: 175rpx;
	}

	.h-180 {
		height: 180rpx;
	}

	.h-185 {
		height: 185rpx;
	}

	.h-190 {
		height: 190rpx;
	}

	.h-195 {
		height: 195rpx;
	}

	.h-200 {
		height: 200rpx;
	}

	.h-205 {
		height: 205rpx;
	}

	.h-210 {
		height: 210rpx;
	}

	.h-215 {
		height: 215rpx;
	}

	.h-220 {
		height: 220rpx;
	}

	.h-225 {
		height: 225rpx;
	}

	.h-230 {
		height: 230rpx;
	}

	.h-235 {
		height: 235rpx;
	}

	.h-240 {
		height: 240rpx;
	}

	.h-245 {
		height: 245rpx;
	}

	/* 生成 px-1 到 px-50 */
	.px-1 {
		padding-left: 1rpx;
		padding-right: 1rpx;
	}

	.px-2 {
		padding-left: 2rpx;
		padding-right: 2rpx;
	}

	.px-3 {
		padding-left: 3rpx;
		padding-right: 3rpx;
	}

	.px-4 {
		padding-left: 4rpx;
		padding-right: 4rpx;
	}

	.px-5 {
		padding-left: 5rpx;
		padding-right: 5rpx;
	}

	.px-6 {
		padding-left: 6rpx;
		padding-right: 6rpx;
	}

	.px-7 {
		padding-left: 7rpx;
		padding-right: 7rpx;
	}

	.px-8 {
		padding-left: 8rpx;
		padding-right: 8rpx;
	}

	.px-9 {
		padding-left: 9rpx;
		padding-right: 9rpx;
	}

	.px-10 {
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.px-11 {
		padding-left: 11rpx;
		padding-right: 11rpx;
	}

	.px-12 {
		padding-left: 12rpx;
		padding-right: 12rpx;
	}

	.px-13 {
		padding-left: 13rpx;
		padding-right: 13rpx;
	}

	.px-14 {
		padding-left: 14rpx;
		padding-right: 14rpx;
	}

	.px-15 {
		padding-left: 15rpx;
		padding-right: 15rpx;
	}

	.px-16 {
		padding-left: 16rpx;
		padding-right: 16rpx;
	}

	.px-17 {
		padding-left: 17rpx;
		padding-right: 17rpx;
	}

	.px-18 {
		padding-left: 18rpx;
		padding-right: 18rpx;
	}

	.px-19 {
		padding-left: 19rpx;
		padding-right: 19rpx;
	}

	.px-20 {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.px-21 {
		padding-left: 21rpx;
		padding-right: 21rpx;
	}

	.px-22 {
		padding-left: 22rpx;
		padding-right: 22rpx;
	}

	.px-23 {
		padding-left: 23rpx;
		padding-right: 23rpx;
	}

	.px-24 {
		padding-left: 24rpx;
		padding-right: 24rpx;
	}

	.px-25 {
		padding-left: 25rpx;
		padding-right: 25rpx;
	}

	.px-26 {
		padding-left: 26rpx;
		padding-right: 26rpx;
	}

	.px-27 {
		padding-left: 27rpx;
		padding-right: 27rpx;
	}

	.px-28 {
		padding-left: 28rpx;
		padding-right: 28rpx;
	}

	.px-29 {
		padding-left: 29rpx;
		padding-right: 29rpx;
	}

	.px-30 {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.px-31 {
		padding-left: 31rpx;
		padding-right: 31rpx;
	}

	.px-32 {
		padding-left: 32rpx;
		padding-right: 32rpx;
	}

	.px-33 {
		padding-left: 33rpx;
		padding-right: 33rpx;
	}

	.px-34 {
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.px-35 {
		padding-left: 35rpx;
		padding-right: 35rpx;
	}

	.px-36 {
		padding-left: 36rpx;
		padding-right: 36rpx;
	}

	.px-37 {
		padding-left: 37rpx;
		padding-right: 37rpx;
	}

	.px-38 {
		padding-left: 38rpx;
		padding-right: 38rpx;
	}

	.px-39 {
		padding-left: 39rpx;
		padding-right: 39rpx;
	}

	.px-40 {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.px-41 {
		padding-left: 41rpx;
		padding-right: 41rpx;
	}

	.px-42 {
		padding-left: 42rpx;
		padding-right: 42rpx;
	}

	.px-43 {
		padding-left: 43rpx;
		padding-right: 43rpx;
	}

	.px-44 {
		padding-left: 44rpx;
		padding-right: 44rpx;
	}

	.px-45 {
		padding-left: 45rpx;
		padding-right: 45rpx;
	}

	.px-46 {
		padding-left: 46rpx;
		padding-right: 46rpx;
	}

	.px-47 {
		padding-left: 47rpx;
		padding-right: 47rpx;
	}

	.px-48 {
		padding-left: 48rpx;
		padding-right: 48rpx;
	}

	.px-49 {
		padding-left: 49rpx;
		padding-right: 49rpx;
	}

	.px-50 {
		padding-left: 50rpx;
		padding-right: 50rpx;
	}

	/* 生成 py-1 到 py-50 */
	.py-1 {
		padding-top: 1rpx;
		padding-bottom: 1rpx;
	}

	.py-2 {
		padding-top: 2rpx;
		padding-bottom: 2rpx;
	}

	.py-3 {
		padding-top: 3rpx;
		padding-bottom: 3rpx;
	}

	.py-4 {
		padding-top: 4rpx;
		padding-bottom: 4rpx;
	}

	.py-5 {
		padding-top: 5rpx;
		padding-bottom: 5rpx;
	}

	.py-6 {
		padding-top: 6rpx;
		padding-bottom: 6rpx;
	}

	.py-7 {
		padding-top: 7rpx;
		padding-bottom: 7rpx;
	}

	.py-8 {
		padding-top: 8rpx;
		padding-bottom: 8rpx;
	}

	.py-9 {
		padding-top: 9rpx;
		padding-bottom: 9rpx;
	}

	.py-10 {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.py-11 {
		padding-top: 11rpx;
		padding-bottom: 11rpx;
	}

	.py-12 {
		padding-top: 12rpx;
		padding-bottom: 12rpx;
	}

	.py-13 {
		padding-top: 13rpx;
		padding-bottom: 13rpx;
	}

	.py-14 {
		padding-top: 14rpx;
		padding-bottom: 14rpx;
	}

	.py-15 {
		padding-top: 15rpx;
		padding-bottom: 15rpx;
	}

	.py-16 {
		padding-top: 16rpx;
		padding-bottom: 16rpx;
	}

	.py-17 {
		padding-top: 17rpx;
		padding-bottom: 17rpx;
	}

	.py-18 {
		padding-top: 18rpx;
		padding-bottom: 18rpx;
	}

	.py-19 {
		padding-top: 19rpx;
		padding-bottom: 19rpx;
	}

	.py-20 {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.py-21 {
		padding-top: 21rpx;
		padding-bottom: 21rpx;
	}

	.py-22 {
		padding-top: 22rpx;
		padding-bottom: 22rpx;
	}

	.py-23 {
		padding-top: 23rpx;
		padding-bottom: 23rpx;
	}

	.py-24 {
		padding-top: 24rpx;
		padding-bottom: 24rpx;
	}

	.py-25 {
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}

	.py-26 {
		padding-top: 26rpx;
		padding-bottom: 26rpx;
	}

	.py-27 {
		padding-top: 27rpx;
		padding-bottom: 27rpx;
	}

	.py-28 {
		padding-top: 28rpx;
		padding-bottom: 28rpx;
	}

	.py-29 {
		padding-top: 29rpx;
		padding-bottom: 29rpx;
	}

	.py-30 {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.py-31 {
		padding-top: 31rpx;
		padding-bottom: 31rpx;
	}

	.py-32 {
		padding-top: 32rpx;
		padding-bottom: 32rpx;
	}

	.py-33 {
		padding-top: 33rpx;
		padding-bottom: 33rpx;
	}

	.py-34 {
		padding-top: 34rpx;
		padding-bottom: 34rpx;
	}

	.py-35 {
		padding-top: 35rpx;
		padding-bottom: 35rpx;
	}

	.py-36 {
		padding-top: 36rpx;
		padding-bottom: 36rpx;
	}

	.py-37 {
		padding-top: 37rpx;
		padding-bottom: 37rpx;
	}

	.py-38 {
		padding-top: 38rpx;
		padding-bottom: 38rpx;
	}

	.py-39 {
		padding-top: 39rpx;
		padding-bottom: 39rpx;
	}

	.py-40 {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	.py-41 {
		padding-top: 41rpx;
		padding-bottom: 41rpx;
	}

	.py-42 {
		padding-top: 42rpx;
		padding-bottom: 42rpx;
	}

	.py-43 {
		padding-top: 43rpx;
		padding-bottom: 43rpx;
	}

	.py-44 {
		padding-top: 44rpx;
		padding-bottom: 44rpx;
	}

	.py-45 {
		padding-top: 45rpx;
		padding-bottom: 45rpx;
	}

	.py-46 {
		padding-top: 46rpx;
		padding-bottom: 46rpx;
	}

	.py-47 {
		padding-top: 47rpx;
		padding-bottom: 47rpx;
	}

	.py-48 {
		padding-top: 48rpx;
		padding-bottom: 48rpx;
	}

	.py-49 {
		padding-top: 49rpx;
		padding-bottom: 49rpx;
	}

	.py-50 {
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	/* 生成 mx-1 到 mx-50 */
	.mx-1 {
		margin-left: 1rpx;
		margin-right: 1rpx;
	}

	.mx-2 {
		margin-left: 2rpx;
		margin-right: 2rpx;
	}

	.mx-3 {
		margin-left: 3rpx;
		margin-right: 3rpx;
	}

	.mx-4 {
		margin-left: 4rpx;
		margin-right: 4rpx;
	}

	.mx-5 {
		margin-left: 5rpx;
		margin-right: 5rpx;
	}

	.mx-6 {
		margin-left: 6rpx;
		margin-right: 6rpx;
	}

	.mx-7 {
		margin-left: 7rpx;
		margin-right: 7rpx;
	}

	.mx-8 {
		margin-left: 8rpx;
		margin-right: 8rpx;
	}

	.mx-9 {
		margin-left: 9rpx;
		margin-right: 9rpx;
	}

	.mx-10 {
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.mx-11 {
		margin-left: 11rpx;
		margin-right: 11rpx;
	}

	.mx-12 {
		margin-left: 12rpx;
		margin-right: 12rpx;
	}

	.mx-13 {
		margin-left: 13rpx;
		margin-right: 13rpx;
	}

	.mx-14 {
		margin-left: 14rpx;
		margin-right: 14rpx;
	}

	.mx-15 {
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	.mx-16 {
		margin-left: 16rpx;
		margin-right: 16rpx;
	}

	.mx-17 {
		margin-left: 17rpx;
		margin-right: 17rpx;
	}

	.mx-18 {
		margin-left: 18rpx;
		margin-right: 18rpx;
	}

	.mx-19 {
		margin-left: 19rpx;
		margin-right: 19rpx;
	}

	.mx-20 {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.mx-21 {
		margin-left: 21rpx;
		margin-right: 21rpx;
	}

	.mx-22 {
		margin-left: 22rpx;
		margin-right: 22rpx;
	}

	.mx-23 {
		margin-left: 23rpx;
		margin-right: 23rpx;
	}

	.mx-24 {
		margin-left: 24rpx;
		margin-right: 24rpx;
	}

	.mx-25 {
		margin-left: 25rpx;
		margin-right: 25rpx;
	}

	.mx-26 {
		margin-left: 26rpx;
		margin-right: 26rpx;
	}

	.mx-27 {
		margin-left: 27rpx;
		margin-right: 27rpx;
	}

	.mx-28 {
		margin-left: 28rpx;
		margin-right: 28rpx;
	}

	.mx-29 {
		margin-left: 29rpx;
		margin-right: 29rpx;
	}

	.mx-30 {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.mx-31 {
		margin-left: 31rpx;
		margin-right: 31rpx;
	}

	.mx-32 {
		margin-left: 32rpx;
		margin-right: 32rpx;
	}

	.mx-33 {
		margin-left: 33rpx;
		margin-right: 33rpx;
	}

	.mx-34 {
		margin-left: 34rpx;
		margin-right: 34rpx;
	}

	.mx-35 {
		margin-left: 35rpx;
		margin-right: 35rpx;
	}

	.mx-36 {
		margin-left: 36rpx;
		margin-right: 36rpx;
	}

	.mx-37 {
		margin-left: 37rpx;
		margin-right: 37rpx;
	}

	.mx-38 {
		margin-left: 38rpx;
		margin-right: 38rpx;
	}

	.mx-39 {
		margin-left: 39rpx;
		margin-right: 39rpx;
	}

	.mx-40 {
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

	.mx-41 {
		margin-left: 41rpx;
		margin-right: 41rpx;
	}

	.mx-42 {
		margin-left: 42rpx;
		margin-right: 42rpx;
	}

	.mx-43 {
		margin-left: 43rpx;
		margin-right: 43rpx;
	}

	.mx-44 {
		margin-left: 44rpx;
		margin-right: 44rpx;
	}

	.mx-45 {
		margin-left: 45rpx;
		margin-right: 45rpx;
	}

	.mx-46 {
		margin-left: 46rpx;
		margin-right: 46rpx;
	}

	.mx-47 {
		margin-left: 47rpx;
		margin-right: 47rpx;
	}

	.mx-48 {
		margin-left: 48rpx;
		margin-right: 48rpx;
	}

	.mx-49 {
		margin-left: 49rpx;
		margin-right: 49rpx;
	}

	.mx-50 {
		margin-left: 50rpx;
		margin-right: 50rpx;
	}

	/* 生成 my-1 到 my-50 */
	.my-1 {
		margin-top: 1rpx;
		margin-bottom: 1rpx;
	}

	.my-2 {
		margin-top: 2rpx;
		margin-bottom: 2rpx;
	}

	.my-3 {
		margin-top: 3rpx;
		margin-bottom: 3rpx;
	}

	.my-4 {
		margin-top: 4rpx;
		margin-bottom: 4rpx;
	}

	.my-5 {
		margin-top: 5rpx;
		margin-bottom: 5rpx;
	}

	.my-6 {
		margin-top: 6rpx;
		margin-bottom: 6rpx;
	}

	.my-7 {
		margin-top: 7rpx;
		margin-bottom: 7rpx;
	}

	.my-8 {
		margin-top: 8rpx;
		margin-bottom: 8rpx;
	}

	.my-9 {
		margin-top: 9rpx;
		margin-bottom: 9rpx;
	}

	.my-10 {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.my-11 {
		margin-top: 11rpx;
		margin-bottom: 11rpx;
	}

	.my-12 {
		margin-top: 12rpx;
		margin-bottom: 12rpx;
	}

	.my-13 {
		margin-top: 13rpx;
		margin-bottom: 13rpx;
	}

	.my-14 {
		margin-top: 14rpx;
		margin-bottom: 14rpx;
	}

	.my-15 {
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}

	.my-16 {
		margin-top: 16rpx;
		margin-bottom: 16rpx;
	}

	.my-17 {
		margin-top: 17rpx;
		margin-bottom: 17rpx;
	}

	.my-18 {
		margin-top: 18rpx;
		margin-bottom: 18rpx;
	}

	.my-19 {
		margin-top: 19rpx;
		margin-bottom: 19rpx;
	}

	.my-20 {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.my-21 {
		margin-top: 21rpx;
		margin-bottom: 21rpx;
	}

	.my-22 {
		margin-top: 22rpx;
		margin-bottom: 22rpx;
	}

	.my-23 {
		margin-top: 23rpx;
		margin-bottom: 23rpx;
	}

	.my-24 {
		margin-top: 24rpx;
		margin-bottom: 24rpx;
	}

	.my-25 {
		margin-top: 25rpx;
		margin-bottom: 25rpx;
	}

	.my-26 {
		margin-top: 26rpx;
		margin-bottom: 26rpx;
	}

	.my-27 {
		margin-top: 27rpx;
		margin-bottom: 27rpx;
	}

	.my-28 {
		margin-top: 28rpx;
		margin-bottom: 28rpx;
	}

	.my-29 {
		margin-top: 29rpx;
		margin-bottom: 29rpx;
	}

	.my-30 {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.my-31 {
		margin-top: 31rpx;
		margin-bottom: 31rpx;
	}

	.my-32 {
		margin-top: 32rpx;
		margin-bottom: 32rpx;
	}

	.my-33 {
		margin-top: 33rpx;
		margin-bottom: 33rpx;
	}

	.my-34 {
		margin-top: 34rpx;
		margin-bottom: 34rpx;
	}

	.my-35 {
		margin-top: 35rpx;
		margin-bottom: 35rpx;
	}

	.my-36 {
		margin-top: 36rpx;
		margin-bottom: 36rpx;
	}

	.my-37 {
		margin-top: 37rpx;
		margin-bottom: 37rpx;
	}

	.my-38 {
		margin-top: 38rpx;
		margin-bottom: 38rpx;
	}

	.my-39 {
		margin-top: 39rpx;
		margin-bottom: 39rpx;
	}

	.my-40 {
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.my-41 {
		margin-top: 41rpx;
		margin-bottom: 41rpx;
	}

	.my-42 {
		margin-top: 42rpx;
		margin-bottom: 42rpx;
	}

	.my-43 {
		margin-top: 43rpx;
		margin-bottom: 43rpx;
	}

	.my-44 {
		margin-top: 44rpx;
		margin-bottom: 44rpx;
	}

	.my-45 {
		margin-top: 45rpx;
		margin-bottom: 45rpx;
	}

	.my-46 {
		margin-top: 46rpx;
		margin-bottom: 46rpx;
	}

	.my-47 {
		margin-top: 47rpx;
		margin-bottom: 47rpx;
	}

	.my-48 {
		margin-top: 48rpx;
		margin-bottom: 48rpx;
	}

	.my-49 {
		margin-top: 49rpx;
		margin-bottom: 49rpx;
	}

	.my-50 {
		margin-top: 50rpx;
		margin-bottom: 50rpx;
	}
</style>

<style>
	.custom-bg {
		min-height: 100%;
	}

	.avatar-group {
		position: relative;
	}

	page {
		height: 100%;
		background-color: #F8F8F8;
	}
</style>